<div class="rating-demo">
  <section>
    <h4>Normal:</h4>
    <hi-time-picker [(ngModel)]="time1" [disabled]="disabled"></hi-time-picker>
  </section>

  <hr>
  <pre>{{time1 | json}}</pre>

  <section>
    <h4>No seconds:</h4>
    <hi-time-picker [(ngModel)]="time2" [showSeconds]="false" [disabled]="disabled"></hi-time-picker>

    <button class="btn btn-primary" (click)="disabled = !disabled">{{disabled ? 'Enable' : 'Disable'}}</button>
  </section>

  <hr>
  <pre>{{time2 | json}}</pre>

  <section>
    <h4>Min time and max time:</h4>
    <hi-time-picker [(ngModel)]="time3" [maxTime]="{ hour: 20, minute: 0, second: 10 }"
                    [minTime]="{ hour: 1, minute: 0, second: 0 }" (ngModelChange)="timeChange($event)"></hi-time-picker>
  </section>

  <hr>
  <pre>{{time3 | json}}</pre>

</div>
